<template>
  <div class="container">
    <div class="header">
      <div class="title">员工信息表</div>
      <div class="actions">
        <a-button type="primary" @click="addRow">新增员工</a-button>
        <a-button @click="getData">获取数据</a-button>
        <a-button @click="resetData">重置数据</a-button>
      </div>
    </div>

    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      rowKey="id"
      bordered
    >
      <template slot="name" slot-scope="text, record">
        <a-input
          :value="text"
          placeholder="请输入姓名"
          @change="e => handleChange(e.target.value, record.id, 'name')"
          @blur="removeHighlight(record.id)"
        />
      </template>

      <template slot="age" slot-scope="text, record">
        <a-input-number
          :value="text"
          placeholder="请输入年龄"
          :min="1"
          :max="100"
          @change="value => handleChange(value, record.id, 'age')"
          @blur="removeHighlight(record.id)"
        />
      </template>

      <template slot="gender" slot-scope="text, record">
        <a-select
          :value="text"
          style="width: 100%"
          @change="value => handleChange(value, record.id, 'gender')"
        >
          <a-select-option :value="0">女</a-select-option>
          <a-select-option :value="1">男</a-select-option>
        </a-select>
      </template>

      <template slot="action" slot-scope="text, record">
        <a-button type="link" @click="deleteRow(record.id)">删除</a-button>
      </template>
    </a-table>

    <div class="footer">
      <a-button type="dashed" @click="exportData">导出数据</a-button>
    </div>

    <div class="data-preview" v-if="showDataPreview">
      <h3>当前数据预览</h3>
      <pre>{{ JSON.stringify(data, null, 2) }}</pre>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
          width: 80,
          align: 'center'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'age' }
        },
        {
          title: '性别',
          dataIndex: 'gender',
          key: 'gender',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'gender' }
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data: [],
      pagination: {
        pageSize: 5,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) =>
          `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
      },
      showDataPreview: false,
      nextId: 1
    }
  },
  methods: {
    initData() {
      // 初始化数据
      this.data = []
      for (let i = 0; i < 8; i++) {
        this.data.push({
          id: this.nextId++,
          name: '员工' + i,
          age: 20 + i,
          gender: i % 2
        })
      }
    },
    handleChange(value, id, field) {
      // 更新数据
      const index = this.data.findIndex(item => item.id === id)
      if (index !== -1) {
        // note: 核心代码
        this.$set(this.data, index, {
          ...this.data[index],
          [field]: value
        })

        // 添加高亮效果
        const row = document.querySelector(`[data-row-key="${id}"]`)
        if (row) {
          row.classList.add('highlight')
        }
      }
    },
    removeHighlight(id) {
      // 移除高亮效果
      const row = document.querySelector(`[data-row-key="${id}"]`)
      if (row) {
        setTimeout(() => {
          row.classList.remove('highlight')
        }, 1000)
      }
    },
    addRow() {
      // 添加新行
      this.data.unshift({
        id: this.nextId++,
        name: '新员工',
        age: 25,
        gender: 0
      })
    },
    deleteRow(id) {
      // 删除行
      this.data = this.data.filter(item => item.id !== id)
    },
    getData() {
      // 获取数据
      console.log('当前数据:', this.data)
      this.showDataPreview = true

      // 显示成功消息
      this.$message.success('数据已获取，请查看控制台和数据预览区域')
    },
    resetData() {
      // 重置数据
      this.$confirm({
        title: '确认重置',
        content: '此操作将重置所有数据，是否继续？',
        onOk: () => {
          this.initData()
          this.showDataPreview = false
          this.$message.success('数据已重置')
        }
      })
    },
    exportData() {
      // 导出数据
      const dataStr = JSON.stringify(this.data, null, 2)
      const dataUri =
        'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)

      const exportFileDefaultName = '员工数据.json'

      const linkElement = document.createElement('a')
      linkElement.setAttribute('href', dataUri)
      linkElement.setAttribute('download', exportFileDefaultName)
      linkElement.click()

      this.$message.success('数据已导出为JSON文件')
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
}
.actions {
  display: flex;
  gap: 10px;
}
.ant-btn {
  border-radius: 6px;
}
.ant-table-thead > tr > th {
  background-color: #fafafa;
  font-weight: 600;
}
.ant-input {
  border-radius: 6px;
}
.footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.data-preview {
  margin-top: 20px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}
.data-preview h3 {
  margin-top: 0;
  color: #595959;
}
.highlight {
  background-color: #fff2e8;
  transition: background-color 0.3s;
}
</style>
